<template>
  <div class="index-class">
    <!--头部-->
    <div class="index-head">
      <easy-head></easy-head>\
    </div>
    <!--主题-->
    <div class="index-center">
      <div class="index-banner">
        <swiper v-if="swiperList.length>0" :options="swiperOption" class="swiper-container" ref="mySwiper">
          <!-- slides -->
          <swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
            <img class='swiper-img' :src='item.imgUrl' alt="去哪儿门票"/>
          </swiper-slide>
          <!-- Optional controls ,显示小点-->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="index-type">
        <div @click="goBuyHtml('/goshopping')">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconbianlidian"></use>
            </svg>
          </div>
          <div>
            超市即送
          </div>
        </div>
        <div @click="goBuyHtml('/simbuy')">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconshouji"></use>
            </svg>
          </div>
          <div>
            流量卡办理
          </div>
        </div>
         <div  @click="goBuyHtml('/courierservice')">
           <div>
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#iconkuaidi-copy-copy"></use>
             </svg>
           </div>
           <div>
             快递收发
           </div>
         </div>
        <!--     <div>
               <div>
                 <svg class="icon" aria-hidden="true">
                   <use xlink:href="#iconzhoubian"></use>
                 </svg>
               </div>
               <div>
                 周边食品
               </div>
             </div>-->
        <!--        <div>
                  <div>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#iconershou"></use>
                    </svg>
                  </div>
                  <div>
                    校园二手
                  </div>
                </div>-->
        <!--        <div>
                  <div>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#iconshequ"></use>
                    </svg>
                  </div>
                  <div>
                    逸闻趣事
                  </div>
                </div>-->
        <div>
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconElasticSearch-blue"></use>
            </svg>
          </div>
          <div>
            待开放
          </div>
        </div>
      </div>
      <div class="index-end">
        <div class="end-span">
          <div>推荐信息</div>
        </div>
        <div class="end-data">
          <div class="data-img"><img src="../../../static/img/index-end/5G.jpg" alt=""></div>
          <div class="data-class">
            <div class="data-title">移动/电信流量卡办理</div>
            <div class="data-info">不再局限于大王卡内的APP，使用该卡可以为所欲为的进行上网。</div>
            <div class="data-info data-price"><span>价格：</span><span style="color: red">22元</span><span>60G/每月...</span>
              <span class="ent-btn" @click="goBuyHtml('/simbuy')"><button type="button" class="layui-btn layui-btn-sm">立即办理</button>
</span></div>
          </div>
        </div>
        <div class="end-data">
          <div class="data-img"><img src="../../../static/img/index-end/会员卡办理.jpg" alt=""></div>
          <div class="data-class">
            <div class="data-title">成为尊贵的VIP一员</div>
            <div class="data-info">成为尊贵的VIP后，可享受15元的跑腿费</div>
            <div class="data-info data-price"><span>价格：</span><span style="color: red">9.9元</span><span>/每月...</span>
              <span class="ent-btn" @click="goBuyHtml('/openvip')"><button type="button" class="layui-btn layui-btn-sm">立即办理</button>
</span></div>
          </div>
        </div>
        <div style="width: 100%;height: 30%;text-align: center;margin-top:0.3rem">
          <div style="text-align: center">长按保存，二维码扫一扫该图片，可联系客服，24小时在线</div>
          <img  style="width: 30%" src="../../../static/img/wechat.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import easyHead from "../easyHead/easyHead"

  export default {
    name: "index",
    components: {
      easyHead
    },
    methods: {
      goBuyHtml(url) {
        this.$router.push({path: url})
      },
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    data() {
      return {
        swiperOption: {
          //設定初始化時slide的索引
          initialSlide: 0,
          //Slides的滑動方向，可設定水平(horizontal)或垂直(vertical)
          direction: 'horizontal',
          autoplay: {
            delay: 2500, //1秒切換一次
            disableOnInteraction: false,
          },
          //環狀輪播
          loop: true,
          slidesPerView: 'auto',
          loopedSlides: 3,
          loopAdditionalSlides: 0,

          //間距
          spaceBetween: 26,
          //修改swiper自己或子元素時，自動初始化swiper
          observer: true,
          //修改swiper的父元素時，自動初始化swiper
          observeParents: true
        },
        //三张轮播，使用变量循环
        swiperList: [
          {
            id: '001',
            imgUrl: "../../../static/img/banner/超图图2.jpg"
          },
          {
            id: '002',
            imgUrl: "../../../static/img/banner/快递.png"
          },
          {
            id: '003',
            imgUrl: "../../../static/img/banner/流量卡.png"
          }
        ]
      }
    },
    mounted() {
      this.swiper()
    }


  }
</script>

<style scoped>

  .ent-btn {
    float: right;

  }

  .layui-btn {
  }

  .data-title {
    color: red;
    font-size: 0.4rem;
    font-weight: 600;
  }

  .end-data > div {
    float: left;
  }

  .data-class > div {
    margin-top: 1.5%;
    letter-spacing: 0.02rem;
    margin-left: 2%;
    height: 30%;
  }

  .data-class {
    width: 68%;
    height: 2rem;
    margin-top: 0.25rem;
    font-size: 0.35rem;
  }

  .data-img {
    width: 30%;
    height: 2.15rem;
    margin-top: 0.25rem;
  }

  .end-data {
    width: 100%;
    height: 2.8rem;
    border-bottom: 0.02rem #ffc52c solid;
  }

  .end-span > div {
    width: 50%;
    margin-left: 5%;
  }

  .end-span {
    font-size: 0.6rem;
    width: 100%;
    height: 1rem;
  }

  .index-end {
    width: 100%;
    height: 8rem;
  }

  .index-type > div > div:last-child {
    color: red;
  }

  .index-type > div > div {
    width: 100%;
    margin-top: 0.2rem;
  }

  .index-type > div {
    float: left;
    width: 25%;
    margin-top: 2%;
    margin-bottom: 1%;
    height: 100%;
    text-align: center;

  }

  .index-type {
    font-size: 0.5rem;
    font-family: 微软雅黑;
    width: 100%;
    height: 2rem;
    border: 0.02rem #cccccc solid;
  }

  .index-banner {
    margin-top: 0.05rem;
    border-bottom: 0.02rem #cccccc solid;

  }

  .swiper-container {
    height: 3rem;
    width: 100%;
  }

  .swiper-wrapper {
    width: 100%;
    height: 100%
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%
  }

  img {
    width: 100%;
    height: 100%
  }
</style>
